<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="zInc_head.jsp" %>
<%

    String id0 = app.get("id0");//获取产品大类别的ID
    String id1 = app.get("id1"); //获取产品小类别的ID
    String filter = "1=1";//随便写个为真的条件，以方便下面判断并添加 AND...的条件
    Rs series0 = new Rs("series");//大类别（如果有id0）
    Rs series1 = new Rs("series");//小类别(如果有id1)
    if (!"".equals(id0)) {
        filter = "EXISTS (SELECT 0 FROM series WHERE (id='" + id0 + "' OR tid='" + id0 + "') AND id=product.series_id) ";
        series0 = dao.rs(new Args("series", "id='" + id0 + "'"));
    }//如果有传大类ID过来，设置的filter条件将查询该大类下的所有产品.同时把大类查询出来方便页面（例如'您的位置'处）显示。

    if (!"".equals(id1)) {
        filter = "EXISTS (SELECT 0 FROM series WHERE (id='" + id1 + "' OR tid='" + id1 + "') AND id=product.series_id) ";
        series1 = dao.rs(new Args("series", "id='" + id1 + "'"));
    }//如果有小类ID过来，设置的filter条件将查询该小类下的所有产品.同时把小类查询出来方便页面（例如'您的位置'处）显示。

    String brand_id = app.get("brand_id");//获取品牌ID
    if (!"".equals(brand_id)) filter += " AND brand_id='" + brand_id + "'";//如果有选择品牌，就附加上品牌的过滤条件

    String size_id = app.get("size_id");//获取屏幕尺寸ID
    if (!"".equals(size_id)) filter += " AND size_id='" + size_id + "'";//如果有尺寸ID传过来，则附加上尺寸的过滤条件

    String disksize = app.get("disksize");//获取传过来的硬盘大小条件
    if (!"".equals(disksize)) filter += " AND disksize='" + disksize + "'";//有传过来，则附加上硬盘大小的条件过滤

    String memsize = app.get("memsize");
    //这个演示了内存大小是可以多选的噢（页面会把多个选项以|分隔隔后传过来。下面的语句将其拆分后，添加查询条件）
    if (!"".equals(memsize)) {
        String ft = "1=0"; //随便附加个为假的条件，以便下面多个关键字的 OR..连接
        String[] memArr = memsize.split("\\|");
        for (String key : memArr) {
            ft += " OR memsize='" + key + "'";
        }
        filter += " AND (" + ft + ")";
    }

    String exterior = app.get("exterior");
    //这个演示了外观特性是可以多选的（由于后台添加产品时，外观特性也是多选的，所以下面要用LIKE而不是等于）
    if (!"".equals(exterior)) {
        String ft = "1=0";
        String[] exArr = exterior.split("\\|");
        for (String key : exArr) {
            ft += " OR exterior LIKE '%" + key + "%'";
        }
        filter += " AND (" + ft + ")";
    }


    filter += " ORDER BY sort"; //最后添加排序方式

    Args args = new Args("product", filter);//构造Args查询对象
    Ls productLs = dao.ls(args);//执行查询


    //下面这两个是查询所有品牌和屏幕尺寸的Ls（用于产品页图片列表上方的条件过虑区的内容显示）
    Ls brandLs = dao.ls(new Args("brand", " ORDER BY sort"));
    Ls sizeLs = dao.ls(new Args("size", " ORDER BY sort"));
%>
<title>产品中心
    <%if (!series0.isNull()) out.print("- " + series0.get("t0"));%>
    <%if (!series1.isNull()) out.print("- " + series1.get("t0"));%>
    - JDiy示例程序</title>
<script src="../JDiy_bin/js/class/JSer.js" type="text/javascript"></script>
<script type="text/javascript">
    /**
     * 此函数用于设置地址栏参数，用到了JSer脚本框架，在设置参数的时候，现有地址栏参数会保持不变（不会丢失）。
     * 省去了生成链接的时候要一个一个地把参数以"参数1=值1&参数2=值2....&参数n=值n"的形式设置进去的麻烦。
     * */
    function choose(name, value) {
        var url = JSer.url();

        if (value != null) url.set(name, value);
        else url.del(name);

        if (name != 'page') url.del('page');
        url.go();
    }

    /**
     * 此函数处理可以多选的查询条件，多选的选项将以|分隔，存到地址栏中的name变量中，如：
     * 参数1=值1|值2|值N&参数2=值
     * */
    function mChoose(name, value) {
        var url = JSer.url(),
                values = url.get(name),
                valuesArr = values == null ? [] : values.split("|"),
                i = valuesArr.indexOf(value);
        if (i == -1) valuesArr.push(value);
        else valuesArr.splice(i, 1);

        if (valuesArr.length) url.set(name, valuesArr.join("|"));
        else url.del(name);
        url.go();
    }
</script>
</head>
<body>
<!-- 头部内容 开始 -->
<div class="max top">
    <div style="margin:8px;">
        <%@include file="zInc_top.jsp" %>
    </div>
</div>
<!-- 头部内容 结束 -->

<!--顶部导航菜单 开始 -->
<%int thisNav=3;%><!--定个变量，以便在topNav包含文件中判断：当前栏目菜单显示不同的样式-->
<%@include file="zInc_topNav.jsp" %>
<!--顶部导航菜单 结束 -->


<!--中部主体区域 开始 -->
<div class="max cc">
    <table width="100%" cellpadding="0" cellspacing="0">
        <tr>

            <!-- 左侧导航菜单 开始 -->
            <%@include file="zInc_pro_left.jsp" %>
            <!-- 左侧导航菜单 结束 -->


            <!-- 中间内容显示区 开始 -->
            <td class="bodyContent" valign="top">
                <div class="loc">您的位置：首页 - 产品中心
                    <%if (!series0.isNull()) out.print("- " + series0.get("t0"));%>
                    <%if (!series1.isNull()) out.print("- " + series1.get("t0"));%>
                </div>
                <div style="margin:5px;border:2px #FFCCFF solid;background-color: #FFCCFF;">
                    <div>以下列出多种筛选条件选择（包括单选和多选的查询条件），
                        演示了如何在jsp页面实现多参数的综合查询及Action的实现方法。在实际应用中我们可能会采用Ajax技术
                        但由于本程序主要是为了方便大家对JDiy框架的学习，所以这儿并未使用AJAX，
                        不过本页借助了JSer框架的Url类，来实现网页的跳转，这样简化了分页链接的生成（不必向每个链接地址传递N多个查询参数）
                    </div>
                    <div class="pro_types"><strong>按品牌： </strong>
                        <a href="javascript:choose('brand_id',null);"
                           style="<%if("".equals(brand_id))out.print("color:red");%>">[不限]</a>
                        <%for (Rs brand : brandLs.getItems()) { %>
                        <a href="javascript:choose('brand_id','<%=brand.get("id")%>');"
                           style="<%if(brand.get("id").equals(brand_id))out.print("color:red");%>"><%=brand.get("name")%>
                        </a>
                        <%}%>
                    </div>

                    <div class="pro_types"><strong>按屏幕大小：</strong>
                        <a href="javascript:choose('size_id',null);"
                           style="<%if("".equals(size_id))out.print("color:red");%>">[不限]</a>
                        <%for (Rs size : sizeLs.getItems()) { %>
                        <a href="javascript:choose('size_id','<%=size.get("id")%>');"
                           style="<%if(size.get("id").equals(size_id))out.print("color:red");%>"><%=size.get("name")%>
                        </a>
                        <%}%>
                    </div>

                    <div class="pro_types"><strong>硬盘大小：</strong>
                        <a href="javascript:choose('disksize',null);"
                           style="<%if("".equals(disksize))out.print("color:red");%>">[不限]</a>
                        <%
                            String disks[] = {"120G", "250G", "500G", "1TB", "2TB"};
                            for (String s : disks) {
                        %>
                        <a href="javascript:choose('disksize', '<%=s%>');"
                           style="<%=disksize.equals(s)?"color:red":""%>"><%=s%>
                        </a><%
                            }
                        %>
                    </div>

                    <div class="pro_types"><strong>内存大小(可多选)：</strong>
                        <%
                            String mems[] = {"2G", "4G", "6G", "8G"};
                            for (String s : mems) {
                        %>
                        <a href="javascript:mChoose('memsize', '<%=s%>');"
                           style="<%=memsize.contains(s)?"background-color:yellow;color:red":""%>"><%=s%>
                        </a><%
                            }
                        %></div>

                    <div class="pro_types"><strong>外观特性(可多选)： </strong>
                        <%
                            String waiguan[] = {"轻薄", "稳重", "个性", "时尚"};
                            for (String s : waiguan) {
                        %>
                        <a href="javascript:mChoose('exterior', '<%=s%>');"
                           style="<%=exterior.contains(s)?"background-color:yellow;color:red":""%>"><%=s%>
                        </a><%
                            }
                        %></div>
                </div>

                <div style="padding:15px;">
                    <table style="width:100%">
                        <tr>
                            <%
                                int i = 0;
                                for (Rs pro : productLs.getItems()) {%>
                            <td align="center">
                                <a href="product_show.jsp?id0=<%=id0%>&id1=<%=id1%>&productId=<%=pro.get("id")%>"
                                   target="_self">
                                    <img src="../<%=pro.getF("picmin")%>" style="width: 150px; height:105px;"
                                         border="0"></a>

                                <div>
                                    <a href="product_show.jsp?id0=<%=id0%>&id1=<%=id1%>&productId=<%=pro.get("id")%>">
                                        <%=pro.get("name")%>
                                    </a>
                                </div>
                            </td>
                            <%
                                    if (++i % 4 == 0) out.println("</tr><tr>");//每４个转下行.
                                }%>
                        </tr>
                    </table>

                </div>

                <!--分页链接 开始-->
                <!--注意：分页样式您可以根据自己的需要调整，以下只是一个简单的示例演示-->
                <div class="pager">
                    共<%=productLs.getPageCount()%>页/<%=productLs.getRowCount()%>条记录
                    当前第<%=productLs.getAbsPage()%>页.
                    &nbsp;&nbsp;&nbsp;
                    <%
                    if(productLs.getAbsPage()>1){
                    %>
                        <a href="javascript:choose('page',1);">[首页]</a>
                        <a href="javascript:choose('page',<%=productLs.getAbsPage()-1%>);">[上一页]</a>
                    <%}else{%>
                        [首页]
                        [上一页]
                    <%}
                        for(int j=1;j<=productLs.getPageCount();j++){
                            %><a href="javascript:choose('page', <%=j%>);">[<%=j%>]</a><%
                        }
                        if(productLs.getAbsPage()<productLs.getPageCount()){
                    %>
                        <a href="javascript:choose('page', <%=productLs.getAbsPage()+1%>);">[下一页]</a>
                        <a href="javascript:choose('page', <%=productLs.getPageCount()%>);">[尾页]</a>
                    <%}else{%>
                        [下一页]
                        [尾页]
                    <%}%>
                </div>
                <!--分页链接 结束-->
            </td>
            <!-- 中间内容显示区 结束 -->

        </tr>
    </table>
</div>

<!--中部主体区域 结束 -->


<!--页脚 开始 -->
<%@include file="zInc_foot.jsp" %>
<!--页脚 结束 -->
</body>
</html>